<template>
    <a-table v-if="dataSource.length>0" defaultExpandAllRows row-key="id" :pagination="false" :dataSource="dataSource" :columns="columns">
        <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'permissions'">
                <a-checkbox-group @change="handleCheckPermissionsChange(record)" v-model:value="record.checkPermissions" style="width: 100%">

                    <a-checkbox :value="item.permissionCode" v-for="(item, index2) in record.permissions"
                        :key="index + '-' + index2">{{ item.permissionName }}</a-checkbox>

                </a-checkbox-group>
            </template>
            <template v-if="column.key === 'action'">
                <a-checkbox @change="handleCheckAllChange(record)" v-model:checked="record.checkPermissionAll">全选</a-checkbox>
            </template>

        </template>
    </a-table>
</template>
<script setup lang="ts">
import { MenuApi, PermissionGrantedApi } from '@/api/services';
import { GrantedInput, MenuDto, QueryApiBaseResultDto } from '@/api/services/types';
import { message } from 'ant-design-vue';
import { ref, watch } from 'vue';

const props = defineProps({
    providerKey:{
        type:String,
        default:''
    },
    providerName:{
          type:String,
        default:'R'
    }
})

const dataSource = ref<Array<MenuDto>>([])
const buildTree  = function(items:Array<MenuDto>,pid:string|null){
  const list:Array<MenuDto> = [];
  const children = items.filter(x=>x.parentId==pid);
  for (let index = 0; index < children.length; index++) {
    const child = children[index];
      const node = Object.assign({},child);
      if(items.filter(x=>x.parentId==child.id).length>0){
        node.children = buildTree(items,child.id);
      }
      list.push(node);
  }
  return list;
}
const loadData = function () {
    const input = {
        providerKey:props.providerKey,
        providerName:props.providerName
    };
    MenuApi.getAll(input).then(res => {
        const { code, data, msg } = res;
        if (code == 0) {
            dataSource.value =buildTree( data.items || [],null);
        }else{
            message.error(msg);
        }
    })
}

const handleCheckPermissionsChange = function(record:MenuDto){
    if(record.checkPermissions.length==record.permissions.length){
        record.checkPermissionAll=true;
    }else{
        record.checkPermissionAll = false;
    }
}

const handleCheckAllChange = function (record: MenuDto) {
    if (record.checkPermissionAll) {
        record.checkPermissions = record.permissions.map(x => x.permissionCode);
    } else {
        record.checkPermissions = [];
    }

}
const submit =function():Promise<QueryApiBaseResultDto<boolean>>{
    const input:GrantedInput={
        providerKey:props.providerKey,
        providerName:props.providerName,
        permissionCodes:[]
    };
    dataSource.value.forEach(item=>{
        input.permissionCodes= input.permissionCodes.concat(item.checkPermissions);
    })
    return PermissionGrantedApi.granted(input);
}


watch(()=>props.providerKey,()=>{
    loadData();
},{immediate:true})

const columns = [
    // {
    //     title: '序号',
    //     dataIndex: 'index',
    //     key: 'index',
    //     width: 70,
    //     customRender({ index }) {
    //         return index + 1;
    //     }
    // },
    {
        title: '菜单名称',
        dataIndex: 'displayName',
        key: 'displayName'
    },
    {
        title: '权限',
        dataIndex: 'permissions',
        key: 'permissions'
    },
    {
        title: '全选',
        dataIndex: 'action',
        key: 'action'
    }
]
defineExpose({
    submit
})

</script>